"use client"
import dynamic from "next/dynamic";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { Separator } from "@/components/ui/separator";
import { usePathname } from "next/navigation";
import BreadcrumbDynamic from "@/components/Layout/BreadcrumbDynamic";
import { NavUser } from "@/components/nav-user";
import { SidebarDataProvider } from "@/components/Context/SidebarDataContext"; // 确保路径正确
// 在 layout.tsx 或需要用侧边栏的地方
/* 注意：动态加载的组件必须使用 ssr: false ,加载一次*/
const AppSidebar = dynamic(() => import("@/components/app-sidebar").then(mod => mod.AppSidebar), { ssr: false });

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const pathname = usePathname();

  // 检查是否是 auth 路由
  const isAuthRoute = pathname.startsWith("/auth");

  if (isAuthRoute) {
    // 如果是 auth 路由，直接渲染 children，不包裹全局布局
    return <>{children}</>;
  }

  return (
    <html lang="zh-CN">
      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
        <SidebarDataProvider>
          <SidebarProvider>
            <AppSidebar />
            <SidebarInset>
              <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
                <SidebarTrigger className="-ml-1" />
                <Separator orientation="vertical" className="mr-2 h-4" />
                <BreadcrumbDynamic pathname={pathname} />
                <div className="fixed right-0">
                  <NavUser user={{
                    name: "sad",
                    email: "724846777@qq.com",
                    avatar: "https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"
                  }} />
                </div>
              </header>
              <div className="flex flex-1 flex-col gap-4 p-4 relative">
                {children}
              </div>
            </SidebarInset>
          </SidebarProvider>
        </SidebarDataProvider>
      </body>
    </html>
  );
}